<template>

  <div id="app">
    <input class="ipt" v-model="message" >
  <p>{{message}}</p>
  <button class="btn" @click="resule">添加</button>
  <p v-for="(item,index) in List " :key="index">
    <span class="item">{{item}}</span>
    <button class="item" @click="handleRemove(index)">移除</button>
  </p>
  <span class="item" v-if="flag">总数:{{List.length}}</span>
  </div>

</template>
<script>
export default {
  data(){
    return {
      message: '',
      flag:false,
      List:[]
    }
  },
  methods:{
    resule:function(){
      if(this.message){
        this.List.push(this.message);
      if(this.List.length>0){
        this.flag=true;
        }
      }
    },
    handleRemove: function(index) {
      this.List.splice(index, 1)  
    }
  }
}
</script>
<style scoped>
.ipt {
  height: 40px;
  outline: none;
}

.btn{
  height: 40px;
  background: #40b883;
  color: white;
  margin-bottom: 20px;
}

.item {
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: #40b883;
  color: white;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
}
</style>